<template>
  <section class="todoapp">
    <!-- header -->
    <!--<header class="header">-->
    <!--  <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">-->
    <!--</header>-->
    <!-- main section -->
    <section v-show="todos.length" class="main">
      <!--<input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">-->
      <!--<label for="toggle-all" />-->
      <ul class="todo-list">
        <todo
          v-for="(todo, index) in projectList"
          :key="index"
          :list="todo"
          @deleteTodo="deleteTodo"
        />
      </ul>
    </section>
    <!-- footer -->
    <footer class="footer">
      <!--<span class="todo-count">-->
      <!--  <strong>{{ remaining }}</strong>-->
      <!--  {{ remaining | pluralize('item') }} left-->
      <!--</span>-->
      <!--<ul class="filters">-->
      <!--  <li v-for="(val, key) in filters" :key="key">-->
      <!--    <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>-->
      <!--  </li>-->
      <!--</ul>-->
      <!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
        Clear completed
      </button> -->

      <el-pagination
        v-show="projectList.length > 0"
        @current-change="currentChange"
        background
        layout="prev, pager, next"
        :total="size">
      </el-pagination>
    </footer>
  </section>
</template>

<script>
import Todo from './Todo.vue'
import { mapGetters } from 'vuex'
import { deleteProjectRecord } from '@/service/Api'

const STORAGE_KEY = 'todos'
const filters = {
  all: todos => todos,
  active: todos => todos.filter(todo => !todo.done),
  completed: todos => todos.filter(todo => todo.done)
}
const defalutList = [
  { text: 'star this repository', done: false },
  { text: 'fork this repository', done: false },
  { text: 'follow author', done: false },
  { text: 'vue-element-admin', done: true },
  { text: 'vue', done: true },
  { text: 'element-ui', done: true },
  { text: 'axios', done: true },
  { text: 'webpack', done: true }
]
export default {
  components: { Todo },
  filters: {
    pluralize: (n, w) => n === 1 ? w : w + 's',
    capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
  },
  data() {
    return {
      visibility: 'all',
      filters,
      // todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
      todos: defalutList
    }
  },
  computed: {
    allChecked() {
      return this.todos.every(todo => todo.done)
    },
    filteredTodos() {
      console.log("查看", filters[this.visibility](this.todos))
      return filters[this.visibility](this.todos)
    },
    remaining() {
      return this.todos.filter(todo => !todo.done).length
    },
    ...mapGetters([
      'projectList',
      'size'
    ])
  },
  methods: {
    setLocalStorage() {
      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
    },
    addTodo(e) {
      const text = e.target.value
      if (text.trim()) {
        this.todos.push({
          text,
          done: false
        })
        this.setLocalStorage()
      }
      e.target.value = ''
    },
    toggleTodo(val) {
      val.done = !val.done
      this.setLocalStorage()
    },
    deleteTodo(todo) {
      // this.todos.splice(this.todos.indexOf(todo), 1)
      // this.setLocalStorage()

      deleteProjectRecord(todo).then(response => {
        if(response.code === 0){
          this.$emit("changeProject", null)
        }
      })


    },
    editTodo({ todo, value }) {
      todo.text = value
      this.setLocalStorage()
    },
    clearCompleted() {
      this.todos = this.todos.filter(todo => !todo.done)
      this.setLocalStorage()
    },
    toggleAll({ done }) {
      this.todos.forEach(todo => {
        todo.done = done
        this.setLocalStorage()
      })
    },
    currentChange(val){
      this.$emit("currentChange", val)
    }
  }
}
</script>

<style lang="scss">
  @import './index.scss';
</style>
